<template>
  <div class="app-container">
    <div class="app-title">
      <span>单位上报</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-col :span="1">
          <i :class="[treeShow ? 'el-icon-s-fold treeI': 'el-icon-s-unfold treeI']" @click="toggerTree" />
        </el-col>
        <div class="tap-fillet">
          <el-radio-group v-model="activeName" style="margin-left:4rem; width:700px; height:15px; margin-top:-57px">
            <el-radio-button
              label="0"
              name="noSubmit"
            >未上报</el-radio-button>
            <el-radio-button
              label="1"
              name="submit"
            >已上报</el-radio-button>
            <el-radio-button
              label="-1"
              name="reject"
            >被退回</el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
      <!--功能按钮-->
      <div class="filter-container">
        <div class="longbuton">
          <el-col style="text-align:right;margin-top:-3px;" :span="16">
            <el-button size="small" class="filter-item" style="margin-left:10px;" type="primary" @click="Query">
              查询
            </el-button>
            <el-button v-if="activeName !== '1'" size="small" class="filter-item" style="margin-left:10px;" type="primary" :loading="submitLoading" @click="isSalarySubmit">
              上报
            </el-button>
            <el-button v-if="activeName === '1'" size="small" class="filter-item" style="margin-left:10px;" type="primary" :loading="revokeSubmitLoading" @click="isCancelSalarySubmit">
              撤销上报
            </el-button>
            <el-button v-if="activeName !== '1'" size="small" class="filter-item" style="margin-left:10px;" type="primary" :loading="salaryBackLoading" @click="Reject">
              退回
            </el-button>
            <el-button size="small" class="filter-item" style="margin-left: 10px;" type="primary" @click="processnode">
              审核日志
            </el-button>
          </el-col>
        </div>
      </div>
      <!-- 图标 -->
      <div>
        <div style="margin-left:88px; position:absolute; margin-top:-1px">
          <img style="width:16px; height:16px;" :src="allimgSrc">
        </div>
        <div style="margin-left:178px; position:absolute; margin-top:-1px">
          <img style="width:16px; height:16px;" :src="Processedimg">
        </div>
        <div style="margin-left:266px; position:absolute; margin-top:-1px">
          <img style="width:16px; height:16px;" :src="Untreatedimg">
        </div>
      </div>
    </el-row>

    <div class="grid-content bg-purple" />

    <div ref="box" class="box">
      <div class="left" :class="[isActive ? 'wid':'wids']">
        <div :class="[treeShow ? 'treeShow' : 'treeNotShow']" :style="{'height' : treeHeight + 'px'}">
          <AgencyTree class="agencyTree" @handleTreeQuery="handleTreeQuery" @getFirstAuthAgencyData="getFirstAuthAgencyData" />
        </div>
      </div>
      <div v-show="Show" class="resize" title="收缩侧边栏" />
      <div class="mid" :class="[isActive ? 'mids': 'min']">
        <unitSubmitChildren
          :key="timer"
          ref="chil"
          :tree-data="treeData"
          :tab-pane="activeName"
          @submitCallback="submitCallback"
          @revokeSubmitCallback="revokeSubmitCallback"
          @salaryBackCallback="salaryBackCallback"
        />
      </div>
      <Drag ref="icon" />
    </div>
  </div>
</template>

<script>
import unitSubmitChildren from '@/views/salaryReport/children/unitSubmitChildren'
import AgencyTree from '@/components/tree/agencyTree'
import Drag from '@/components/Drag'

export default {
  name: 'UnitSubmit',
  components: { unitSubmitChildren, AgencyTree, Drag },
  data() {
    return {
      treeHeight: null,
      isActive: true,
      Show: false,
      treeShow: false,
      treeData: '',
      timer: '',
      activeName: '0',
      submitLoading: false,
      revokeSubmitLoading: false,
      salaryBackLoading: false,
      allimgSrc: require('@/assets/images/whiteall.png'),
      Processedimg: require('@/assets/images/blueselect.png'),
      Untreatedimg: require('@/assets/images/processed.png')

    }
  },
  // 图片显示
  watch: {
    activeName(val) {
      this.timer = new Date().getTime()
      if (val === '0') {
        this.allimgSrc = require('@/assets/images/whiteall.png')
        this.Processedimg = require('@/assets/images/blueselect.png')
        this.Untreatedimg = require('@/assets/images/processed.png')
      } else if (val === '1') {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Processedimg = require('@/assets/images/select.png')
        this.Untreatedimg = require('@/assets/images/processed.png')
      } else {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Processedimg = require('@/assets/images/blueselect.png')
        this.Untreatedimg = require('@/assets/images/blue.png')
      }
    }
  },
  created() {},
  mounted() {
    this.dragController()
    this.getTeHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTeHeight)
  },
  methods: {
    getFirstAuthAgencyData(data) {
      this.treeData = data
    },
    getTeHeight() {
      this.treeHeight = window.innerHeight - 213
    },
    // 拖拽
    dragController() {
      this.$refs.icon.dragControllerDiv()
    },
    toggerTree() {
      this.treeShow = !this.treeShow
      this.isActive = !this.isActive
      this.Show = !this.Show
    },
    handleTreeQuery(data) {
      if (data && data.isleaf === '1') {
        this.treeData = data
      }
    },
    // 查询
    Query() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.query()
      }
    },
    processnode() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.processnode()
      }
    },
    // 上报
    isSalarySubmit() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.submitLoading = true
        this.$refs.chil.salarySubmit()
      }
    },
    // 上报回调
    submitCallback() {
      this.submitLoading = !this.submitLoading
    },
    // 撤销上报
    isCancelSalarySubmit() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.revokeSubmitLoading = true
        this.$refs.chil.cancelSalarySubmit()
      }
    },

    // 撤销上报回调
    revokeSubmitCallback() {
      this.revokeSubmitLoading = !this.revokeSubmitLoading
    },
    // 退回
    salaryBack() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.salaryBackLoading = true
        this.$refs.chil.salaryBack()
      }
    },
    Reject() {
      this.$refs.chil.auditReject()
    },
    salaryBackCallback() {
      this.salaryBackLoading = !this.salaryBackLoading
    }
  }
}
</script>

<style scoped lang="scss">
.app-title {
  margin-bottom: 15px;
  height: 20px;
  border-bottom: 1px solid #DCDFE6;
}

@import "~@/styles/border.scss"; /*引入公共样式*/
.el-col-5 {
  width: 50%;
}
.el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 10px 0 0;
}

.el-radio-button:first-child .el-radio-button__inner {
  border-radius: 0 0 0 10px;
}
</style>
